<template>
  <px-drawer v-model="visible" @close="closeDrawer" @open="openDrawer">
    <template #header>
      <h3 style="font-weight: bold">设备型号{{ typeTitle }}</h3>
    </template>
    <template #default>
      <px-form ref="formRef" :model="formValue" :rules="rules" label-position="right" label-width="120px">
        <px-form-item label="设备类型" prop="typeId">
          <px-select-v2 v-model="formValue.typeId" filterable clearable :options="typeIdList" placeholder="请选择设备类型" />
        </px-form-item>
        <px-form-item label="设备型号" prop="name">
          <px-input v-model="formValue.name" clearable placeholder="请输入设备型号" maxlength="50" />
        </px-form-item>
        <px-form-item label="备注" prop="remark">
          <px-input v-model="formValue.remark" type="textarea" placeholder="请输入备注" :autosize="{ minRows: 10, maxRows: 10 }" maxlength="1000" />
        </px-form-item>
      </px-form>
    </template>
    <template #footer>
      <px-button @click="closeDrawer">取消</px-button>
      <px-button type="primary" @click="handleSubmit(formRef)">保存</px-button>
    </template>
  </px-drawer>
</template>
<script setup lang="ts">
import { addEquipModel, getEquipTypeSelect } from "@/api/equip/archive";
import { PxMessage } from "px-ui";
import { computed, reactive, ref, toRefs } from "vue";

// 调用父级-关闭抽屉、查询列表方法
const emits = defineEmits(["closeDrawer", "queryTable"]);

const formRef = ref();
const state = reactive<any>({
  formValue: {
    id: "",
    typeId: null,
    name: "",
    remark: ""
  },
  typeTitle: "新增",
  typeIdList: []
});
const { formValue, typeTitle, typeIdList } = toRefs(state);
const props = defineProps(["visible", "drawerType", "equipRow"]);
const visible = computed(() => props.visible);
// 表单校验规则
const rules = computed(() => ({
  name: [
    {
      required: true,
      message: "设备型号不能为空",
      trigger: ["blur", "change"]
    }
  ],
  typeId: [
    {
      required: true,
      message: "设备类型不能为空",
      trigger: ["blur", "change"]
    }
  ]
}));

// 设备类型下拉框
const queryTypeIdSelect = async () => {
  const data = await getEquipTypeSelect({});
  typeIdList.value = data.map(item => ({ label: item.name, value: item.id, categoryId: item.categoryId }));
};
// 打开抽屉
const openDrawer = () => {
  formRef.value.resetFields();
  queryTypeIdSelect();
  if (props.drawerType === "add") {
    typeTitle.value = "新增";
    formValue.value.typeId = null;
    formValue.value.name = "";
    formValue.value.remark = "";
    delete formValue.value.id;
  } else if (props.drawerType === "edit") {
    typeTitle.value = "编辑";
    const { id, typeId, name, remark } = props.equipRow;
    formValue.value.id = id;
    formValue.value.typeId = typeId;
    formValue.value.name = name;
    formValue.value.remark = remark;
  }
};
// 关闭抽屉
const closeDrawer = () => {
  formRef.value.resetFields();
  emits("closeDrawer");
};
// 提交
const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      const categoryArr = typeIdList.value.filter(item => {
        return item.value === formValue.value.typeId;
      });
      formValue.value.categoryId = categoryArr[0]?.categoryId || "";
      const params = formValue.value;
      if (props.drawerType === "add") {
        await addEquipModel(params);
        PxMessage.success("新增成功");
        emits("closeDrawer");
        emits("queryTable");
      } else if (props.drawerType === "edit") {
        await addEquipModel(params);
        PxMessage.success("编辑成功");
        emits("closeDrawer");
        emits("queryTable");
      }
    }
  });
};
</script>
<style lang="scss" scoped>
:deep(.px-select-v2) {
  width: 100%;
}
</style>
